<!DOCTYPE html>
<html lang="en" ng-app="leo">
<!-- ag-开头叫内置指令 -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <title>Document</title>
  <style>
  td{vertical-align: middle!important;}
  </style>
</head>

<body>
  <div class="container-fluid">
    <div ng-controller="jd">
      <table class="table table-condensed table-striped table-hover text-center" style="margin-top:50px">
        <thead>
          <tr>
            <td><input type="checkbox" ng-model="toggle" ng-change="checkall()"/></td>
            <td class="text-center">商品名称</td>
            <td class="text-center">商品价格</td>
            <td class="text-center">商品数量</td>
            <td class="text-center">小计</td>
            <td class="text-center">操作</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="shopobj in shop track by $index">
            <td><input type="checkbox" ng-model="shopobj.checked" ng-change="checkone()"/></td>
            <td ng-bind="shopobj.product"></td>
            <td ng-bind="shopobj.price"></td>
            <td>
              <div class="form-inline">
                <button 
                  class="btn btn-primary btn-sm" 
                  ng-click="shopobj.count=shopobj.count-0+1">
                  +</button>
                <input 
                  class="form-control" 
                  type="text" 
                  ng-model="shopobj.count" 
                  ng-readonly="true">
                <button 
                  class="btn btn-primary btn-sm" 
                  ng-click="shopobj.count=shopobj.count-1" 
                  ng-disabled="shopobj.count==1">
                  -</button>
              </div>
            </td>
            <td ng-bind="shopobj.total=shopobj.price*shopobj.count"></td>
            <td>
              <button class="btn btn-primary" ng-click="remove($event, shopobj.id)">删除</button>
            </td>
          </tr>
        </tbody>
        <tfoot ng-cloak>
          <tr>
            <td>
              <select name="" id="" ng-change="salechange()" ng-model="sale">
                <option 
                  ng-repeat="op in discounts track by $index"
                  value="{{op.val}}">
                  {{op.content}}
                </option>
              </select>
            </td>
            <td colspan="3"></td>
            <td>总计: {{toTotal()}} 折后价: {{toSale()}}</td>
          </tr>
        </tfoot>
      </table>

      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">商品名称：</label>
          <div class="col-sm-10">
            <input 
              type="input" 
              class="form-control" 
              id="inputPassword" 
              placeholder="请输入商品名称"
              ng-model="addshop.product">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword" class="col-sm-2 control-label">商品价格：</label>
          <div class="col-sm-10">
            <input 
              type="input" 
              class="form-control" 
              id="inputPassword" 
              placeholder="请输入商品价格"
              ng-model="addshop.price">
          </div>
        </div>
        <div class="pull-right">
          <button class="btn btn-success" ng-click="add()">添加</button>
          <button class="btn btn-warning" ng-click="reset()">重置</button>
        </div>
      </form>
    </div>
  </div>
  <script src="node_modules/angular/angular.js"></script>
  <script>
  // angular模块化 ...
  var app = angular.module('leo', []);

  app.controller("jd", ["$scope", function($scope) {
    $scope.shop = [{
      id: 1,
      checked: false,
      product: "商品1",
      count: 1,
      price: 10,
      total: 0
    }, {
      id: 2,
      checked: false,
      product: "商品2",
      count: 1,
      price: 21,
      total: 0
    }, {
      id: 3,
      checked: false,
      product: "商品3",
      count: 2,
      price: 33,
      total: 0
    }, {
      id: 4,
      checked: false,
      product: "商品4",
      count: 2,
      price: 15,
      total: 0
    }];

    $scope.sale = "0.5";
    $scope.discounts = [
      {val:'0.1',content:'打一折'},
      {val:'0.3',content:'打三折'},
      {val:'0.5',content:'打五折'}
    ];

    $scope.toggle = false;

    $scope.remove = function(e, id){
      $scope.shop = $scope.shop.filter(function(item, index){
        if (!(item.id == id)) {
          return true;
        }
      });
    };

    $scope.add = function(){
      if (Object.keys($scope.addshop).length == 2) {
        $scope.addshop.count = 1;
        $scope.addshop.total = $scope.addshop.count * $scope.addshop.price;
        $scope.shop.push($scope.addshop);
        $scope.addshop = {};
      } else {
        alert("商品名称或价格不能为空");
      }
    };

    $scope.reset = function(){
      $scope.addshop = {};
    };

    $scope.checkall = function(){
      $scope.shop.forEach(function(item, index){
        item.checked = $scope.toggle;
      });
    };

    $scope.checkone = function(){
      var result = $scope.shop.find(function(item, index){
        return item.checked === false;
      });

      $scope.toggle = result ? (result.length ? true : false) : true;
    };

    $scope.toTotal = function(){
      var total = 0;
      
      $scope.shop.forEach(function(item, index){
        total += item.total;
      });

      return total;
    };

    $scope.toSale = function(){
      var num = 10;
      return $scope.toTotal() * ($scope.sale * num) / num;
    };
  }]);
  </script>
</body>

</html>